<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../css/mui.plus.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding-left: 10px;
				padding-right: 70px;
				background-color: #fafafa;
			}
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 4px;
			}
			.footer-right {
				position: absolute;
				width: 70px;
				height: 50px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 5px;
				display: inline-block;
			}
			.footer-center {
				height: 100%;
				padding: 8px 0px;
			}
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
			.footer-center .input-sound {
				background-color: #eee;
			}
			.mui-content {
				height: 100%;
				padding: 44px 0px 50px 0px;
				overflow: auto;
				background-color: #eaeaea;
			}
			#msg-list {
				height: 100%;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
			.msg-item {
				padding: 8px;
				clear: both;
			}
			.msg-item .mui-item-clear {
				clear: both;
			}
			.msg-item .msg-user {
				width: 38px;
				height: 38px;
				border: solid 1px #d3d3d3;
				display: inline-block;
				background: #fff;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				padding: 3px;
				color: #ddd;
			}
			
			.msg-item .msg-user-img{
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			.msg-item-self .msg-user,
			.msg-item-self .msg-content {
				float: right;
			}
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #30B497;
				color: #fff;
				border-color: #30B497;
			}
			footer .mui-icon {
				color: #000;
			}
			footer .mui-icon:active {
				color: #007AFF !important;
			}
			footer .mui-icon-paperplane:before {
				content: "发送";
			}
			footer .mui-icon-paperplane {
				/*-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);*/
				
				font-size: 16px;
				word-break: keep-all;
				line-height: 100%;
				padding-top: 6px;
				color: #fff;
			}
			#msg-sound {
				-webkit-user-select: none !important;
				user-select: none !important;
			}
			.rprogress {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 140px;
				height: 140px;
				margin-left: -70px;
				margin-top: -70px;
				background-image: url(../images/arecord.png);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 30px 30px;
				background-color: rgba(0, 0, 0, 0.7);
				border-radius: 5px;
				display: none;
				-webkit-transition: .15s;
			}
			.rschedule {
				background-color: rgba(0, 0, 0, 0);
				border: 5px solid rgba(0, 183, 229, 0.9);
				opacity: .9;
				border-left: 5px solid rgba(0, 0, 0, 0);
				border-right: 5px solid rgba(0, 0, 0, 0);
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				-webkit-animation: spin 1s infinite linear;
				animation: spin 1s infinite linear;
			}
			.r-sigh{
				display: none;
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				text-align: center;
				line-height: 46px;
				font-size: 40px;
				font-weight: bold;
				color: #2187e7;
			}
			.rprogress-sigh{
				background-image: none !important;
			}
			.rprogress-sigh .rschedule{
				display: none !important;
			}
			.rprogress-sigh .r-sigh{
				display: block !important;
			}
			.rsalert {
				font-size: 12px;
				color: #bbb;
				text-align: center;
				position: absolute;
				border-radius: 5px;
				width: 130px;
				margin: 5px 5px;
				padding: 5px;
				left: 0px;
				bottom: 0px;
			}
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			#h {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				font-family: verdana !important;
				line-height: 18px !important;
				overflow: visible;
				position: absolute;
				left: -1000px;
				right: 0px;
				word-break: break-all;
				word-wrap: break-word;
			}
			.cancel {
				background-color: darkred;
			}
			.msg-user, .msg-user-img {
				border-radius: 50px !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav oe-pri-bar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">聊天窗口</h1>
		</header>
		<pre id='h'></pre>
		<script id='tmp-msg' type="text/html">
			{{each data as v i}}
				<div class="msg-item {{v.pm_type === 'DR_TO_PA' ? 'msg-item-self' : ''}}">
					<img class="{{v.pm_type === 'DR_TO_PA' ? 'msg-user' : 'msg-user-img'}}" src="{{v.avatar_src}}" alt="" />
					<div class="msg-content">
						<div class="msg-content-inner">
								{{v.pm_text}}
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
			{{/each}}
		</script>
		<div class="mui-content">
			<div id='msg-list'>
				<!--<div class="msg-item msg-item-self" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
								测试22
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>-->
			</div>
		</div>
		<footer>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>
			<label for="" class="footer-right">
				<button id='btn-send' class="mui-icon mui-icon-paperplane mui-btn-primary"></button>
			</label>
		</footer>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/lib/template.js"></script>
		<script type="text/javascript" charset="utf-8">
			(function($) {
				var cache   = {}, 
					tmpData = {};
				var msgList = document.getElementById("msg-list"),
					msgTxt = document.getElementById("msg-text");
				
				function getChatList(){
					app.net.get('c_private_msg/show_talk_list', {dr_id : cache.dr_id, pa_id : cache.pa_id},function(data){
						if(data && data.code == 100){
							tmpData = data;
							var html = template('tmp-msg', tmpData);
							msgList.innerHTML = html;
						}
					});
				};
				
				function sendMsg(info, CB){
					app.net.post('c_private_msg/send', info, function(data){
						if(data && data.code == 100){
							data.data.dr_id = data.data.pm_from_id;
							data.data.pa_id = data.data.pm_to_id;
							return CB(data);
						}
					});
				};
				
				$.plusReady(function() {
					var wv = plus.webview.currentWebview();
					cache.dr_id = app.storage.getUserId(), cache.pa_id = wv.pa_id, cache.pm_med_rec_id = wv.rec_id;

					getChatList();
					// 轮询更新数据模拟实时通讯
					setInterval(function(){getChatList()}, 2000);

					$('footer').on('tap', '#btn-send', function(){
						if(msgTxt.value == ''){
							plus.nativeUI.toast('不要调戏人家嘛');
							return;
						}
						sendMsg({
							pm_from_id : cache.dr_id,
							pm_to_id   : cache.pa_id,
							pm_text    : msgTxt.value,
							pm_type    : 'DR_TO_PA',
							pm_med_rec_id : cache.pm_med_rec_id
						},function(data){
							tmpData.data.push(data.data);
							var html = template('tmp-msg', tmpData);
							msgList.innerHTML = html;
						});
						msgTxt.value = '';
					})
					
				});
				
			}(mui));
		</script>
	</body>

</html>